import React, {Component, useState} from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {
    Text,
    View,
    StyleSheet,
    SafeAreaView,
    TextInput,
    Button,
    Dimensions,
    StatusBar,
    TouchableOpacity, Image,
    ImageBackground,
    ActivityIndicator,
} from 'react-native';




export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            account: {  // Corrected spelling
                username: "",
                password: "",
            }
        }
    }


    loginbutton=async ()=>{
        this.setState({ isLoading: true });
            try {
                let response = await fetch(
                    "http://10.86.3.157:8080/user",
                    {
                        method: "POST",
                        headers: {
                            'Content-Type': "application/json",
                        },
                        body: JSON.stringify(this.state.account)

                    }
                )
                let json = await response.json();
                if (json.status) {
                    console.log(json.data.token)
                    await AsyncStorage.setItem('Token', json.data.token);
                    console.log("Token stored successfully");
                    this.setState({ isLoading: false });
                    this.props.navigation.navigate('Contactperson');

                }
                else {
                    console.log("Token stored failed");
                    this.setState({ isLoading: false });
                }
            } catch (error) {
                console.error(error);
                console.log("Login failed");
                this.setState({ isLoading: false });
            }



    }
    render() {
        return (
            <ImageBackground
                source={require('./loginback2.png')}
            >
                <StatusBar translucent backgroundColor="transparent" barStyle={"dark-content"} />
                <SafeAreaView style={style.safeareaview}>
                    <Text style={style.text}>登录</Text>
                    <View style={style.view}>
                        <TextInput
                            placeholder="账号"
                            style={style.textinput}
                            value={this.state.account.username}
                            onChangeText={(text) => this.setState(prevState => ({
                                account: {
                                    ...prevState.account,
                                    username: text
                                }
                            }))}
                        />
                        <TextInput
                            placeholder="密码"
                            secureTextEntry={true}
                            style={style.textinput}
                            value={this.state.account.password}
                            onChangeText={(text) => this.setState(prevState => ({
                                account: {
                                    ...prevState.account,
                                    password: text
                                }
                            }))}
                        />
                    </View>

                    <TouchableOpacity style={style.button} onPress={this.loginbutton} >
                        <Text style={style.buttontext}>登录</Text>
                    </TouchableOpacity>
                    {this.state.isLoading && <ActivityIndicator size="large" color="#0000ff" style={style.isLoading} />}
                    <Image style={style.image} source={require('./jiahao.png')}></Image>
                    <Text style={style.register}>注册</Text>
                </SafeAreaView>
            </ImageBackground>
        );
    }
}

const style=StyleSheet.create({
    text:{
        marginTop:Dimensions.get('window').height/8,
        textAlign:"center",
        color:"#000000",
        fontSize:25,
    },
    view:{
        marginTop:Dimensions.get('window').height/8,
        height:Dimensions.get('window').height/6,
    },
    safeareaview:{
        height:140*Dimensions.get('window').height/100,
    },
    textinput:{
        height:Dimensions.get('window').height/13,
        width:12*Dimensions.get('window').width/15,
        backgroundColor:"#ffffff",
        alignSelf:"center",
        borderStyle:"solid",
        margin:Dimensions.get('window').height/60,
        borderRadius:10,
        textAlign:"center",
        elevation: 1,
    },
    button:{
        marginTop:Dimensions.get('window').height/10,
        width:12*Dimensions.get('window').width/15,
        height:Dimensions.get('window').height/20,
        alignSelf:"center",
        backgroundColor:"#1E90FF",
        borderRadius:6,
    },
    buttontext:{
        textAlign:"center",
        color:"#000000",

        margin:10,
    },
    isLoading:{
        marginTop:10
    },
    image:{
        height:Dimensions.get('window').height/15,
        width:Dimensions.get('window').width/15,
        resizeMode:"contain",
        marginTop:6*Dimensions.get('window').height/20,
        alignSelf:"center"
    },
    register:{
        color:"#000000",
        fontSize:15,
        margin:2,
        alignSelf:"center"
    }

})
